<template>
  <div>
    <!--    <div class="header">-->
    <!--      <gSearch class="header_search"/>-->
    <!--    </div>-->
    <div v-if="showFlag" class="body">
      <!--      <el-divider>论文信息</el-divider>-->
      <!--      <div class="container">-->
      <!--        <div class="paper">-->
      <!--          <div class="brief">-->
      <!--            <h2 v-if="paper.Chinese_title">{{ paper.Chinese_title }}</h2>-->
      <!--            <h2 v-else-if="paper.English_title">{{ paper.English_title }}</h2>-->
      <!--            <h2 v-else>论文名字缺失</h2>-->

      <!--            <h3 class="author">-->
      <!--            <span style="margin-right:12px;" v-for="(item,key) in paper.author" :key="key">{{ item }}-->
      <!--              <sup>{{ key + 1 }}</sup>-->
      <!--            </span>-->
      <!--            </h3>-->
      <!--            <h3 class="author">-->
      <!--            <span style="margin-right:12px;" v-for="(item,key) in paper.institution" :key="key">{{ item }}-->
      <!--              <sup>{{ key + 1 }}</sup>-->
      <!--            </span>-->
      <!--            </h3>-->
      <!--          </div>-->
      <!--          <div class="row">-->
      <!--            <span class="rowtit">摘要：</span>-->
      <!--            <span id="ChDivSummary" name="ChDivSummary" class="abstract-text">{{ paper.Chinese_abstract }}</span>-->
      <!--          </div>-->
      <!--          <div class="row">-->
      <!--            <span class="rowtit">Abstract：</span>-->
      <!--            <span id="EnDivSummary" name="ChDivSummary" class="abstract-text">{{ paper.English_abstract }}</span>-->
      <!--          </div>-->
      <!--          <div class="row">-->
      <!--            <span class="rowtit">关键词：</span>-->
      <!--            <span v-for="(item,key) in paper.Chinese_keywords" :key="key">{{ item }};</span>-->
      <!--          </div>-->
      <!--          <div class="row">-->
      <!--            <span class="rowtit">Keywords：</span>-->
      <!--            <span v-for="(item,key) in paper.English_keywords" :key="key">{{ item }};</span>-->
      <!--          </div>-->
      <!--          <div class="row">-->
      <!--            <span class="rowtit">来源：</span>-->
      <!--            <span v-for="(item,key) in paper.from" :key="key">-->
      <!--            <span v-if="item.Chinese_name">{{ item.Chinese_name }};</span>-->
      <!--            <span v-else-if="item.English_name">{{ item.English_name }};</span>-->
      <!--            <span v-else></span>-->
      <!--          </span>-->
      <!--          </div>-->
      <!--          &lt;!&ndash;        <div class="row">&ndash;&gt;-->
      <!--          &lt;!&ndash;          <span class="rowtit">基金资助：</span>&ndash;&gt;-->
      <!--          &lt;!&ndash;          <p>国家重点研发计划项目（2019YFB1703700）；</p>&ndash;&gt;-->
      <!--          &lt;!&ndash;        </div>&ndash;&gt;-->
      <!--          &lt;!&ndash;        <div class="row">&ndash;&gt;-->
      <!--          &lt;!&ndash;          <ul>&ndash;&gt;-->
      <!--          &lt;!&ndash;            <li class="top-space"><span class="rowtit">DOI：</span>&ndash;&gt;-->
      <!--          &lt;!&ndash;              <p>10.16055/j.issn.1672-058X.2021.0005.001</p>&ndash;&gt;-->
      <!--          &lt;!&ndash;            </li>&ndash;&gt;-->
      <!--          &lt;!&ndash;            <li class="top-space"><span class="rowtit">专辑：</span>&ndash;&gt;-->
      <!--          &lt;!&ndash;              <p>工程科技Ⅱ辑</p>&ndash;&gt;-->
      <!--          &lt;!&ndash;            </li>&ndash;&gt;-->
      <!--          &lt;!&ndash;            <li class="top-space"><span class="rowtit">专题：</span>&ndash;&gt;-->
      <!--          &lt;!&ndash;              <p>航空航天科学与工程</p>&ndash;&gt;-->
      <!--          &lt;!&ndash;            </li>&ndash;&gt;-->
      <!--          &lt;!&ndash;            <li class="top-space"><span class="rowtit">分类号：</span>&ndash;&gt;-->
      <!--          &lt;!&ndash;              <p>V263.1</p>&ndash;&gt;-->
      <!--          &lt;!&ndash;            </li>&ndash;&gt;-->
      <!--          &lt;!&ndash;          </ul>&ndash;&gt;-->
      <!--          &lt;!&ndash;        </div>&ndash;&gt;-->
      <!--&lt;!&ndash;          <div class="row">&ndash;&gt;-->
      <!--&lt;!&ndash;            <el-button style="float: right">下载</el-button>&ndash;&gt;-->
      <!--&lt;!&ndash;          </div>&ndash;&gt;-->
      <!--        </div>-->
      <!--      </div>-->
      <h3>所属技术路径:
        <el-link style="font-size: 20px" v-for="(item,index) in path" :key="item.value" :href="item.url">
          <span v-if="index===0">{{ item.name }}</span>
          <span v-else>->{{ item.name }}</span>
        </el-link>
      </h3>

      <el-divider>知识图谱</el-divider>

      <div class="gContainer">
        <div class="chart_graph">
          <chartOCGraph :nodes="nodes" :links="links"></chartOCGraph>
        </div>
      </div>

      <el-divider>图表</el-divider>
      <div class="chart_pie">
        <div>文献检索关键词对应文献量分布</div>
        <el-select size="small" v-model="value" placeholder="请选择">
          <el-option
            v-for="item in times"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <!--      <el-button>{{$refs.knowledgeGraph.selectNodeData.name}}</el-button>-->
        <chartPie :data="distribution[value]"></chartPie>
      </div>
      <div class="chart_barVec">
        <div>研究热度</div>
        <chartBarVertical :xAxis="bartimes" :data="cites"></chartBarVertical>
      </div>
    </div>
  </div>

</template>

<script>

import chartPie from '@/components/chartPie'
import chartBarVertical from '@/components/chartBarVertical'
import chartOCGraph from '@/components/chartOCGraph'
// import Vue from 'vue'
import Vue from 'vue'

export default {
  name: 'paper',
  components: {
    // graphHover,
    // gSearch,
    chartPie,
    chartBarVertical,
    chartOCGraph
  },
  data () {
    return {
      id: '',
      title: '',
      resource: '',
      showFlag: true,
      path: [],

      // d3jsonParser()处理 json 后返回的结果
      buttonWord: '测试',
      retJson: '{}',
      retData: {},

      svgTitle: '',
      svgType: '',
      svgDetail: '',
      svgId: '',
      showFlowWindow: false,

      paper: {
        id: '',
        filepath: '',
        pubdate: '',
        year: '',
        month: '',
        institution: [],
        Chinese_keywords: [],
        English_keywords: [],
        Chinese_abstract: '',
        English_abstract: '',
        author: [],
        Chinese_title: '',
        English_title: '',
        from: ''
      },

      // Pie Chart
      times: [],
      value: '',
      distribution: {},

      nodes: [],
      links: [],

      // Bar Chart
      bartimes: [],
      cites: [],

      logoUrl: require('@/assets/vue.png')
      // data: {
      //   nodes: [],
      //   links: []
      // },
      // names: ['企业', '贸易类型', '地区', '国家'],
      // labels: ['Enterprise', 'Type', 'Region', 'Country'],
      // linkTypes: ['', 'type', 'locate', 'export']
    }
  },
  mounted () {
    console.log(this.$route)
    this.$message.success('加载数据中...')
    if (JSON.stringify(this.$route.query) === '{}') {
      this.$message.error('跳转参数错误')
    } else {
      this.id = this.$route.query.id
      this.title = this.$route.query.title
      this.resource = this.$route.query.resource
    }
    if (this.id.length <= 0) {
      // this.$axios
      //   .get('http://localhost:2226/show_paperpage_by_title_resource?resource=' + encodeURI(this.resource) + '&title=' + encodeURI(this.title))
      //   .then(res => {
      //     this.onGetDataSucc(res)
      //   })
      //   .catch(error => {
      //     console.log(error)
      //     this.$message.error('请求错误')
      //   })
      Vue.prototype.post('/show_paperpage_by_title_resource', {
        resource: this.resource,
        title: this.title
      }, this.onGetDataSucc)
    } else {
      // this.$axios
      //   .get('http://localhost:2226/show_paperpage?id=' + encodeURI(this.id))
      //   .then(res => {
      //     this.onGetDataSucc(res)
      //   })
      //   .catch(error => {
      //     console.log(error)
      //     this.$message.error('请求错误')
      //   })
      Vue.prototype.post('/show_paperpage', {
        id: this.id
      }, this.onGetDataSucc)
    }
    // this.onGetData('AD_2019_0_20200710132603.txt_3011')
  },
  methods: {
    clickShow (dom) {
      dom.dispatchAction({
        type: 'downplay'
      })
      // 默认设置第一个值得区域高亮
      dom.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: 0
      })
      dom.on('click', e => {
        // 这里执行点击后的操作
        console.log('点击触发', e)
      })
      dom.on('mouseover', e => {
        // 关闭高亮
        dom.dispatchAction({
          type: 'downplay'
        })
        // 设置当前进入的区域内容高亮
        dom.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: e.dataIndex
        })
      })
    },
    onGetDataSucc (response) {
      console.log('onGetDataSucc:', response.data)
      if (response.data.retcode === 1) {
        this.showFlag = false
        return
      }

      // this.retJson = response.request.responseText
      // this.retData = response.data.data
      this.paper = response.data.paper
      console.log('paper:', this.paper)

      this.nodes = response.data.nodes_data
      this.links = response.data.links_data

      response.data.times.forEach(item => {
        this.times.push({
          label: item,
          value: item
        })
      })
      if (this.times.length > 0) {
        this.value = this.times[0].value
      }

      this.distribution = response.data.distribution

      this.bartimes = response.data.bartimes
      this.cites = response.data.cites

      const nameList = response.data.path.split('_')
      let prev = '?type='
      nameList.forEach((item, index) => {
        if (index === 0) {
          prev += item
          const htmlStr = '#/paper2/' + prev
          this.path.push({
            name: item,
            url: htmlStr
          })
          prev += '&path=' + item
        } else {
          prev += '_' + item
          const htmlStr = '#/paper2/' + prev
          this.path.push({
            name: item,
            url: htmlStr
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
//.header {
//  height: 69px;
//  left: 0;
//  top: 0px;
//  position: absolute;
//  width: 100%;
//}
//
//.header_logo {
//  position: absolute;
//  left: 0px;
//  padding: 4px 28px 0 30px;
//  top: 6px;
//  width: 69px;
//  height: 69px
//}
//
//.header_search {
//  position: absolute;
//  right: 0px;
//  padding: 4px 28px 0 30px;
//  top: 6px;
//}

.body {
  position: absolute;
  // top: 69px;
  left: 0;
  width: 100%;
}

.gContainer {
  position: relative;
  box-shadow: 0 0px 0px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  margin-left: 15px;
  margin-right: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.bg-card {
  //background: #d3dce6;
  color: #000;
  font-weight: bold;
  text-align: left;
}

.bg-card-light {
  color: #000;
  text-align: left;
  font-size: 14px;
  //background: #e5e9f2;
}

.grid-content {
  font-size: 14px;
  padding: 1vh 1vw;
  border-radius: 5px;
  align-items: center;
  //min-height: 2vh;
}

.container {
  padding-top: 15px;
  background-color: #fff;
  margin-left: 15px;
  margin-right: 15px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

.paper {
  width: 80%;
  margin: 0 auto 30px;
}

.brief {
  text-align: center;
}

.brief .author {
  padding: 0;
  margin-right: 10px;
  line-height: 27px;
  text-align: center;
  font-size: 14px;
  font-weight: normal;
  word-break: break-all;
}

.row {
  float: none;
  min-height: 26px;
  padding-top: 8px;
  font-size: 14px;
  color: #000;
  clear: both;
  text-align: justify;
  text-justify: inter-word;
  display: table;
  width: 100%;
}

.row .rowtit {
  display: table-cell;
  vertical-align: top;
  padding-right: 5px;
  line-height: 26px;
  font-weight: bold;
  white-space: nowrap;
  width: 8px;
}

.row .abstract-text, .row .claim-text {
  display: inline;
  color: #666;
  line-height: 26px;
  font-weight: normal;
  text-align: justify;
  text-justify: inter-word;
  word-break: break-all;
}

ul, li {
  list-style: none;
  padding: 0px;
  margin: 0px;
}

.row li {
  *display: inline;
}

.row span {
  line-height: 26px;
  margin-left: 0px;
  margin-right: 0px;
  color: #666;
  word-break: break-all;
}

.row .top-space + .top-space {
  padding-top: 8px;
}

.chart_pie {
  border: 1px solid #ededed;
  width: calc((100% - 30px) / 2);
  height: 500px;
  margin: 0 10px 10px 0;
  float: left;
}

.chart_pie:nth-child(3n) {
  margin-right: 0;
}

.chart_barVec {
  border: 1px solid #ededed;
  width: calc((100% - 30px) / 2);
  height: 500px;
  margin: 0 10px 10px 0;
  float: right;
}

.chart_barVec:nth-child(3n) {
  margin-right: 0;
}

.chart_graph {
  border: 1px solid #ededed;
  //width: calc((100% - 30px) * 0.95);
  width: 100%;
  height: 800px;
  margin: 0 10px 10px 0;
  float: right;
}

.chart_graph:nth-child(3n) {
  margin-right: 0;
}

.default-scrollbar__wrap {
  overflow-x: hidden;
}
</style>
